.dx-size-default() {
    @GENERIC_NUMBERBOX_SPIN_CONTAINER_WIDTH: 34px;
    @GENERIC_NUMBERBOX_SPIN_PADDING: 1px;
    @GENERIC_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH: 74px;
    @GENERIC_NUMBERBOX_CLEAR_BUTTON_AREA_WIDTH: 32px;
}
.dx-size-compact() {
    @GENERIC_NUMBERBOX_SPIN_CONTAINER_WIDTH: 20px;
    @GENERIC_NUMBERBOX_SPIN_PADDING: 1px;
    @GENERIC_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH: 60px;
    @GENERIC_NUMBERBOX_CLEAR_BUTTON_AREA_WIDTH: 20px;
}


.dx-numberbox-spin-container {
    overflow: hidden;
    width: @GENERIC_NUMBERBOX_SPIN_CONTAINER_WIDTH;
    .border-radius(@numberbox-spin-container-border-radius);
}

.dx-numberbox-spin-up-icon {
    .dx-icon-spinup;
    color: @numberbox-spin-icon-color;
}

.dx-numberbox-spin-down-icon {
    .dx-icon-spindown;
    color: @numberbox-spin-icon-color;
}

.dx-numberbox-spin-up-icon,
.dx-numberbox-spin-down-icon {
    .dx-icon-font-centered-sizing(@GENERIC_BASE_ICON_SIZE);
    .border-radius(@numberbox-spin-icon-border-radius);
}

.dx-numberbox-spin.dx-show-clear-button .dx-texteditor-input {
    padding-right: @GENERIC_NUMBERBOX_SPIN_CONTAINER_WIDTH + @GENERIC_NUMBERBOX_CLEAR_BUTTON_AREA_WIDTH;
}


.dx-numberbox-spin-button {
    background-color: @texteditor-bg;
    padding: @GENERIC_NUMBERBOX_SPIN_PADDING;
}

.dx-state-hover {
    &.dx-numberbox-spin-button {
        .dx-numberbox-spin-down-icon,
        .dx-numberbox-spin-up-icon {
            border: 1px solid @numberbox-spin-hover-border-color;
            background-color: @numberbox-spin-hover-bg;
        }
    }
}

.dx-state-active {
    &.dx-numberbox-spin-button {
        .dx-numberbox-spin-down-icon,
        .dx-numberbox-spin-up-icon {
            background-color: @numberbox-spin-active-bg;
            color: @numberbox-spin-active-color;
        }
    }
}

.dx-numberbox-spin {
    .validation-icon-position(@GENERIC_NUMBERBOX_SPIN_CONTAINER_WIDTH);

    &.dx-show-clear-button:not(.dx-texteditor-empty) {
        .validation-icon-position(@GENERIC_NUMBERBOX_SPIN_CONTAINER_WIDTH + @GENERIC_TEXTEDITOR_ICON_CONTAINER_SIZE);
    }
}

.dx-numberbox-spin-touch-friendly {
    .validation-icon-position(@GENERIC_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH);

    &.dx-show-clear-button:not(.dx-texteditor-empty) {
        .validation-icon-position(@GENERIC_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH + @GENERIC_TEXTEDITOR_ICON_CONTAINER_SIZE);
    }

    .dx-numberbox-spin-container {
        width: @GENERIC_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH;
    }

    .dx-numberbox-spin-container {
        border-left: none;
    }

    &.dx-show-clear-button .dx-texteditor-input {
        padding-right: @GENERIC_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH + @GENERIC_NUMBERBOX_CLEAR_BUTTON_AREA_WIDTH;
    }

    .dx-numberbox-spin-up-icon,.dx-numberbox-spin-down-icon{
        background-position: center;
    }
}


.dx-rtl .dx-numberbox,
.dx-numberbox.dx-rtl {
    &.dx-numberbox-spin-touch-friendly {
        .dx-numberbox-spin-container {
            border-right: none;
        }

        &.dx-show-clear-button .dx-texteditor-input {
            padding-left: @GENERIC_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH + @GENERIC_NUMBERBOX_CLEAR_BUTTON_AREA_WIDTH;
        }
    }

    &.dx-numberbox-spin {
        &.dx-show-clear-button {
            .dx-texteditor-input {
                padding-left: @GENERIC_NUMBERBOX_SPIN_CONTAINER_WIDTH + @GENERIC_NUMBERBOX_CLEAR_BUTTON_AREA_WIDTH;
            }
        }

        .dx-texteditor-input {
            padding-right: @GENERIC_BASE_INLINE_BORDEREDWIDGET_HORIZONTAL_PADDING;
        }
    }
}
